<template>
  <div class="party_building_video">
    <div class="pbv_header">
      <div class="pbv_goBack" @click="$router.back()">
        <em class="iconfont icon-zuojiantou" />
      </div>
      <h2 v-html="headerTitle" />
    </div>
    <div class="pbv_content">
      <div class="pbv_content_h2">
        <h2 v-html="headerTitle" />
      </div>

      <div class="pbv_con_title">
        <div class="circle_left"></div>
        <div class="circle_right"></div>
        <div class="pbv_con_name"><span style="margin-left: -18px;">直播内容：</span></div>
        <div class="pbv_con_text">
          <template v-if="liveContent.length > 0">
            <p v-for="itemName in liveContent" :key="itemName">
              {{ itemName }}
            </p>
          </template>
          <template v-else>--</template>
        </div>
        <VideoPlayer :videoLinkAddress="videoLinkAddress" />
      </div>

    </div>
  </div>
</template>

<script>
import API from "@/api/api-chat-list.js";
import VideoPlayer from "./VideoPlayer";

export default {
  name: "PartyBuildingVideoIndex",
  components: {
    VideoPlayer,
  },
  data() {
    return {
      headerTitle: "党建服务直通车",
      liveContent: [],
      videoLinkAddress: "",
    };
  },
  async created() {
    //提示加载中
    this.$toast.loading({
      message: "加载中...",
      forbidClick: true,
      loadingType: "spinner",
      duration: 0,
    });
    const [numberOfPeriods, title, dataTime] = decodeURIComponent(
      this.$route.params.data
    ).split(","); //拆分路由参数
    const formatDataTime = dataTime.replace('年', '/').replace('月', '/').replace('日', '')
    const {
      data: [{ liveContent = "", videoLinkAddress = "" } = {}],
    } = await API.getZtcLikeByTitle(title); //请求页面展示数据
    this.headerTitle = `<span>总第${numberOfPeriods}期：${title} </span><span>${formatDataTime}</span>`; //设置页面标题
    this.liveContent = liveContent.split(/\·/g).filter((item) => item); //直播内容 按·拆分 过滤去除空字符
    this.videoLinkAddress = videoLinkAddress; //视频地址
    this.$toast.clear(); //关闭提示
  },
};
</script>

<style scoped>
@import url("~@/assets/css/partyBuildingVideo/index.css");
</style>
